<template>
  <div>
    <div class="app_card mb-2 pt-4 pb-4">

      <div class="d-flex justify-content-between search-form">
        <div class="flex-grow-1">

          <div class="el-select w250px" style="margin-top: 2px;">
            <el-date-picker style="width:220px" v-model="queryParam.time" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
          </div>
          <el-select clearable class="w150px mr-3" v-model="queryParam.buildingId" placeholder="请选择教学楼" autocomplete="off">
            <el-option  label="全部教学楼" :value="null" />
            <el-option v-for="item in buildingOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select clearable class="w150px mr-3" v-model="queryParam.roomId" placeholder="请选择教室" autocomplete="off">
            <el-option  label="全部教室" :value="null" />
            <el-option v-for="item in roomOption" :key="item.id" :label="item.Name" :value="item.id"></el-option>
          </el-select>
          <el-button type="primary"  @click="onRefresh()">搜索</el-button>
          <el-button type="primary" plain @click="onReset()">重置</el-button>
        </div>
        <div class="d-flex">
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">
      <el-table stripe size="large" :data="dataOfTable" height="calc(100vh - 300px)" sortable="custom" @sort-change="handleSortChange">
        <el-table-column label="时间" prop="actionTime" align="center">
          <template #default="scope">{{ changeTime(scope.row.actionTime) }}</template>
        </el-table-column>
        <el-table-column label="校区" prop="class" align="center">
          <template #default="scope">{{ scope.row.Room?.Building?.Campus.Name}}</template>
        </el-table-column>
        <el-table-column label="教学楼" prop="buildName" align="center">
          <template #default="scope">{{ scope.row.Room?.Building?.name}}</template>
        </el-table-column>
        <el-table-column label="校区" prop="campusName" align="center">
          <template #default="scope">{{ scope.row.Room?.Building.Campus.Name}}</template>
        </el-table-column>
        <el-table-column label="教学楼" prop="buildingName" align="center">
          <template #default="scope">{{ scope.row.Room?.Building.name}}</template>
        </el-table-column>
        <el-table-column label="教室" prop="roomName" align="center">
          <template #default="scope">{{ scope.row.Room?.Name}}</template>
        </el-table-column>
        <el-table-column label="操作者" prop="userName" align="center">
          <template #default="scope">{{scope.row.User?.name}}</template>
        </el-table-column>
        <el-table-column label="录播主机IP" prop="recordingIp" align="center">
          <template #default="scope">{{ scope.row.Room?.recordingIp}}</template>
        </el-table-column>
        <el-table-column label="操作指令" prop="actionName" align="center">
          <template #default="scope">{{ scope.row.actionName}}</template>
        </el-table-column>
        <el-table-column label="返回状态" prop="actionResult" align="center">
          <template #default="scope">
            {{ scope.row.actionResult }}
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-2">
        <el-pagination background v-model:currentPage="queryParam.page" v-model:page-size="queryParam.pageSize" :page-sizes="paginationOption.pageSizes" :background="false" :layout="paginationOption.layout" :total="paginationOption.total" @size-change="handleChangeSize" @current-change="handleChangeCurrent" />
      </div>
    </div>

  </div>
</template>

<script setup>
/**
 * 操作日志
 */
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';

//组件

// ======================================================
//                      变量声明
// ======================================================

const authStore = useAuthStore();
const buildingOption = ref([]);
const roomOption = ref([]);
// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  time: [],
  roomId: null,
  buildingId: null,
  page: 1,
  pageSize: 10,
})
// 分页栏配置数据
const paginationOption = ref({
  layout: 'total, sizes, prev, pager, next, jumper',
  pageSizes: [10, 20, 50, 100, 500, 1000],
  total: 0,
})
// ======================================================
//                      点击操作
// ======================================================

// 点击刷新按钮
const onRefresh = () => {
  queryParam.value.page = 1;
  loadData();
}

//点击重置按钮
const onReset = () => {
  queryParam.value = {
  time: [],
  roomId: null,
  buildingId: null,
  page: 1,
  pageSize: 10,
}
  loadData()
}

// 处理分页尺寸
const handleChangeSize = (val) => {
  console.log(`${val} items per page`);
  queryParam.value.page = 1;
  queryParam.value.pageSize = val;
  loadData();
}

// 处理页码
const handleChangeCurrent = (val) => {
  console.log(`current page: ${val}`)
  queryParam.value.page = val;
  loadData();
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  EsAjax.post(ApiUrls.playLogGetAll, queryParam.value).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list, count } = res.data.data
    dataOfTable.value = list;
    paginationOption.value.total = count;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getBuildingList = () => {
  EsAjax.post(ApiUrls.buildingList, {  }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    buildingOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

const getRoomList = () => {
  EsAjax.post(ApiUrls.roomList, {  }).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    roomOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

//处理时间格式

const changeTime = (date) => {
  let originalTime = date;

  // 创建新的 Date 对象
  let dateObj = new Date(originalTime);

  // 获取年、月、日、小时、分钟和秒
  let year = dateObj.getFullYear();
  let month = String(dateObj.getMonth() + 1).padStart(2, "0");
  let day = String(dateObj.getDate()).padStart(2, "0");
  let hours = String(dateObj.getHours()).padStart(2, "0");
  let minutes = String(dateObj.getMinutes()).padStart(2, "0");
  let seconds = String(dateObj.getSeconds()).padStart(2, "0");

  // 新的时间格式
  let newTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

  return newTime  
}

onMounted(() => {
  loadData();
  getBuildingList();
  getRoomList();
})

</script>
<style lang="less" scoped>
.class_name {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 10px;
  font-weight: bold;
}
</style>

